<template>
    <div>
        <!-- 1、面包屑导航 -->
        <div class="title" style="margin-top:20px;margin-left:20px;margin-bottom: 20px;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>参数管理</el-breadcrumb-item>
                <el-breadcrumb-item>规格参数</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="background-color:#fff;padding:30px;margin:20px;">
            <el-alert title="注意：只允许为最底层分类设置相关参数！" type="warning" style="margin-bottom:20px;">
            </el-alert>
            <div style="margin-bottom:20px;">
                <span style="font-size:20px;">选择商品分类：</span>
                <el-button type="primary" @click="openCategory">类目选择</el-button>
                <span style="margin-left:20px;">{{ category }}</span>
            </div>
            <el-dialog @close="closeDialog" width="30%" title="类目选择" :visible.sync="innerVisible" v-loading="loading"
                append-to-body>
                <el-tree :data="category_data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerCancel">取 消</el-button>
                    <el-button type="primary" @click="innerConfirm">确 定</el-button>
                </div>
            </el-dialog>
            <el-tabs v-model="activeName" @tab-click="tabClick">
                <el-tab-pane label="动态参数" name="first">
                    <div style="margin:10px 0 20px 0;">
                        <el-button type="primary" @click="addParam" :disabled="isClick">添加参数</el-button>
                    </div>
                    <el-dialog :title="title" :visible.sync="paramsDialog" width="30%" @open='openDialog'>
                        <div>
                            <el-input v-model="paramValue" placeholder="请输入参数名" @change="paramVal"></el-input>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="CancelParams">取 消</el-button>
                            <el-button type="primary" @click="submitParams">确 定</el-button>
                        </div>
                    </el-dialog>
                    <template>
                        <el-table :data="paramsData" highlight-current-row
                            style="width: 100%" :key="key" border>
                            <el-table-column type="index" width="50">
                            </el-table-column>
                            <el-table-column property="param" label="参数名称" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="name" label="操作" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button size="mini" icon="el-icon-edit" type="primary"
                                        @click="paramEditor(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" icon="el-icon-delete" type="danger"
                                        @click="paramDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="second">
                    <div style="margin:10px 0 20px 0;">
                        <el-button type="primary" @click="addProp" :disabled="isClick">添加属性</el-button>
                    </div>
                    <el-dialog :title="prop_title" :visible.sync="propDialog" width="30%" @open='openPropDialog'>
                        <div>
                            <el-input v-model="propValue" placeholder="请输入属性名" @change="propVal"></el-input>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="CancelProp">取 消</el-button>
                            <el-button type="primary" @click="submitProp">确 定</el-button>
                        </div>
                    </el-dialog>
                    <template>
                        <el-table ref="singleTable" :data="propData" highlight-current-row
                            style="width: 100%" :key="key" border>
                            <el-table-column type="index" width="50">
                            </el-table-column>
                            <el-table-column property="property" label="属性名称" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="name" label="操作" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <el-button size="mini" icon="el-icon-edit" type="primary"
                                        @click="propEditor(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" icon="el-icon-delete" type="danger"
                                        @click="propDelete(scope.$index, scope.row)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            length: '',
            type: '',
            prop_type:'',
            title: '',
            prop_title:'',
            prop_index:'',
            index: '',
            isClick: true,
            key: '',
            propDialog:false,
            paramsDialog: false,
            propValue:'',
            paramValue: '',
            loading: false,
            innerVisible: false,
            activeName: 'first',
            category_data: [],
            category: '',
            category_sel: '',
            category_temp: '',
            paramsData: [],
            propData:[],
            currentRow: null
        }
    },

    create() {

    },
    methods: {
        tabClick(tab, event) {
            console.log(tab, event);
        },
        getTreeNode(node) {
            if (node) {
                if (node.parent.label !== undefined) {
                    this.getTreeNode(node.parent);
                    this.category_sel += node.parent.label + '/'
                }
            }
        },
        handleNodeClick(data, node) {
            if (node.childNodes.length == 0) {
                this.getTreeNode(node)
                this.category_sel += data.label;
                this.category_temp = this.category_sel;
                this.category_sel = ''
            } else {
                this.category = ''
            }
        },
        openCategory() {
            this.loading = true;
            this.innerVisible = true;
            this.$ajax({
                method: "get",
                url: "/api/getCategory",
            }).then(res => {
                this.category_data = JSON.parse(res.data.data)
            })
            this.loading = false;
        },
        innerCancel() {
            this.innerVisible = false;
            this.category = "";
            this.isClick = true;
            this.paramsData = [],
            this.propData=[],
            this.length = ''
        },
        closeDialog() {
            this.category_temp = ''
            if (this.category) {
                this.isClick = false;
            }
        },
        getParams() {
            this.$ajax({
                method: "get",
                url: "/api/getParams",
                params: { param: this.category }
            }).then(res => {
                console.log('data:', res.data.data)
                console.log(res.data.data)
                this.length = res.data.data.length
                if (this.length == 0) {
                    this.paramsData = []
                } else {
                    this.paramsData = JSON.parse(res.data.data[0].param);
                }
                console.log('paramsData :', this.paramsData)
            });
            
        },
        getProp(){
            this.$ajax({
                method: "get",
                url: "/api/getProp",
                params: { property: this.category }
            }).then(res => {
                console.log('propdata:', res.data.data)
                console.log(res.data.data)
                this.length = res.data.data.length
                if (this.length == 0) {
                    this.propData = []
                } else {
                    this.propData = JSON.parse(res.data.data[0].property);
                }
                console.log('propData :', this.propData)
            })
        },
        innerConfirm() {
            this.category = this.category_temp;
            this.innerVisible = false;
            console.log(this.category)
            if (this.category) {
                this.isClick = false;
            }
            this.getParams();
            this.getProp()
        },
        addParam() {
            this.paramsDialog = true;
            this.type = 1;
            this.title = '添加动态参数'
        },
        addProp() {
            this.propDialog = true;
            this.prop_type = 1;
            this.prop_title = '添加静态属性'
        },
        CancelParams() {
            this.paramsDialog = false;
            this.paramValue = '';
        },
        CancelProp() {
            this.propDialog = false;
            this.propValue = '';
        },
        submitParams() {
            this.paramsDialog = false;
            if (!this.paramValue) {
                this.$message({
                    message: '请输入参数名！',
                    type: 'warning'
                })
            } else {
                if (this.type == 1) {
                    if (this.length == 0) {
                        let str = '[{"param":"' + this.paramValue + '"}]'
                        this.$ajax({
                            method: "post",
                            url: "/api/setParams",
                            params: { category: this.category, params: str }
                        }).then(res => {
                            if (res.data.res_code == 1) {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                })
                            };
                            this.getParams()
                        })
                    } else {
                        let str = '';
                        console.log('paramsData:',this.paramsData)
                        if (!this.paramsData) {
                            str = '[{"param":"' + this.paramValue + '"}]'
                        } else {
                            str = JSON.stringify(this.paramsData).slice(0, -1) + ',{"param":"' + this.paramValue + '"}]'
                        }
                        console.log('str:',str)
                        this.$ajax({
                            method: "post",
                            url: "/api/addParams",
                            params: { category: this.category, params: str }
                        }).then(res => {
                            if (res.data.res_code == 1) {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                })
                            };
                            this.getParams()
                        })
                    };
                    this.paramValue = '';
                } else {
                    console.log('编辑');
                    this.paramsData[this.index].param = this.paramValue;
                    this.paramValue = ''
                    let str = JSON.stringify(this.paramsData)
                    console.log('str:', str)
                    this.$ajax({
                        method: "post",
                        url: "/api/editorParams",
                        params: { category: this.category, params: str }
                    }).then(res => {
                        if (res.data.res_code == 1) {
                            this.$message({
                                message: '编辑成功！',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: '编辑失败！',
                                type: 'error'
                            })
                        };
                        this.getParams()
                    })
                }
            }
        },
        submitProp() {
            this.propDialog = false;
            if (!this.propValue) {
                this.$message({
                    message: '请输入属性名！',
                    type: 'warning'
                })
            } else {
                if (this.prop_type == 1) {
                    console.log('this.prop_type==1')
                    console.log('length:',this.length)
                    if (this.length == 0) {
                        console.log('propValue:',this.propValue)
                        let str = '[{"property":"' + this.propValue + '"}]'
                        this.$ajax({
                            method: "post",
                            url: "/api/setProp",
                            params: { category: this.category, property: str }
                        }).then(res => {
                            if (res.data.res_code == 1) {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                })
                            };
                            this.getProp()
                        })
                    } else {
                        let str = '';
                        if (this.propData.length == 0) {
                            str = '[{"property":"' + this.propValue + '"}]'
                        } else {
                            str = JSON.stringify(this.propData).slice(0, -1) + ',{"property":"' + this.propValue + '"}]'
                        }
                        this.$ajax({
                            method: "post",
                            url: "/api/addProp",
                            params: { category: this.category, property: str }
                        }).then(res => {
                            if (res.data.res_code == 1) {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                })
                            };
                            this.getProp()
                        })
                    };
                    this.propValue = '';
                } else {
                    console.log('this.prop_type==2')
                    this.propData[this.prop_index].property = this.propValue;
                    this.propValue = ''
                    let str = JSON.stringify(this.propData)
                    console.log('str:', str)
                    this.$ajax({
                        method: "post",
                        url: "/api/editorProp",
                        params: { category: this.category, property: str }
                    }).then(res => {
                        if (res.data.res_code == 1) {
                            this.$message({
                                message: '编辑成功！',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: '编辑失败！',
                                type: 'error'
                            })
                        };
                        //this.getParams()
                    })
                }
            }
        },
        paramEditor(index, row) {
            console.log('index:', index);
            console.log('row:', row);
            this.paramsDialog = true;
            this.title = '编辑动态参数';
            this.type = 2;
            this.index = index;
        },
        propEditor(index, row) {
            console.log('index:', index);
            console.log('row:', row);
            this.propDialog = true;
            this.prop_title = '编辑静态属性';
            this.prop_type = 2;
            this.prop_index = index;
        },
        paramDelete(index, row) {
            this.$confirm('删除此参数名, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.paramsData.splice(index, 1);
                let str = JSON.stringify(this.paramsData);
                this.$ajax({
                    method: "post",
                    url: "/api/deleteParams",
                    params: { category: this.category, params: str }
                }).then(res => {
                    if (res.data.res_code == 1) {
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '删除失败！',
                            type: 'error'
                        })
                    };
                    //this.getParams()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            //this.tableData.splice(index, 1);

        },
        propDelete(index, row) {
            this.$confirm('删除此属性名, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.propData.splice(index, 1);
                let str = JSON.stringify(this.propData);
                this.$ajax({
                    method: "post",
                    url: "/api/deleteProp",
                    params: { category: this.category, property: str }
                }).then(res => {
                    if (res.data.res_code == 1) {
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '删除失败！',
                            type: 'error'
                        })
                    };
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style lang="less" scoped>

</style>